<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/study/layui/css/layui.css" >
  <link rel="stylesheet" href="/static/study/css/style.css" >
  <title>{{ course.course_name|default:"e安行实训平台" }}</title>
  <style>
    html, body{
      width: 100%;
      height: 100%;
      background-color: #ffffff;
    }
    #studying{
      width: 100%;
      min-height: 100%;
      overflow: scroll;
    }
    #study-navbar{
      position: relative;
      float: left;
      height: 780px;
      width: 370px;
      border-right: 1px solid #cccccc;
    }
    #studying-right{
      width: calc(100% - 371px);
      min-height: 100%;
      float: right;
    }
    .study-header{
      height: 70px;
      padding-left: 45px;
      line-height: 70px;
    }
    .study-teacher-name{
      width: 133px;
    }
    #study-course-teacher{
      width: 230px;
      height: 60px;
      padding-right: 10px;
      padding-bottom: 10px;
    }
    #study-course-dir-title{
      width: 330px;
      padding: 20px 20px;
    }
    #study-course-dir-title > div > span:nth-child(1) {
      display: inline-block;
      width: 7px;
      height: 14px;
      background-color: #ff9900;
    }
    #study-course-dir-title > div > span:nth-child(2) {
      font-size: 18px;
      color: #515155;
    }
    .show-chapter-detail{
      cursor: pointer;
    }
    #study-chapter-div{
      padding: 30px 20px;
    }
    #study-chapter-div > video{
      margin-top: 100px;
      margin-left: 30px;
    }
    #study-chapter-head{
      height: 70px;
      z-index: 100;
      margin: 0 auto;
      border-bottom: 1px solid #cccccc;
      padding: 0 20px;
    }
    #study-chapter-head > video{
      margin: 0 auto;
      margin-top: 100px;
    }
    #study-course-teacher > div{
      width: 100%;
    }
    #study-course-teacher > div:first-child{
      color: #515154;
    }
  .course-item-avatar{
    width: 126px;
    height: 70px;
    background-color: rgb(1, 50, 160);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    box-sizing: border-box;
    padding: 10px;
  }
  </style>
</head>
<body>
<div id="studying">
  <div id="study-navbar">
    <div class="title24 study-header">
      <a href="{% url 'study:index' %}">e安行实训平台</a>
    </div>
    <div class="flex-row-between">
      {% if course.avatar_id != 1 %}
      <img width="126" height="70" src="{{course.avatar_url}}" />
      {% else %}
      <div class="course-item-avatar">{{course.course_name}}</div>
      {% endif %}
      <div id="study-course-teacher"  class="flex-column-between">
        <div class="title18">
          {{course.course_name}}
        </div>
        <div class="flex-row-between">
          <div class='title14 study-teacher-name'>
            {% for teacher in course.teacher_set %}
              {% if forloop.counter <= 2 %}
              {{ teacher.name }} &nbsp;
              {%endif%}
            {% endfor %}
          </div>
           <span class="btn-short" onclick=location.href="{% url 'study:course' pk=course.id %}">查看详情</span>
        </div>
      </div>
    </div>
    <div id="study-course-dir-title" class="flex-row-between">
      <div>
        <span></span>
        <span>课程目录</span>
      </div>
      <span class="title14">共{{chapters|length}}章</span>
    </div>
    {% include '../components/course_chapter_tree.html' %}
  </div>
  <div id="studying-right">
    <div id='study-chapter-head' class='flex-row-between'>
      <span class="title24">课程学习</span>
      <div>
        <a href="{% url 'study:userCenter' %}"> 个人中心 </a>
      </div>
    </div>
    <div id='study-chapter-div'>
      {% if chapter.detail_type == 'V' %}
        <video controls width="680">
          <source src="{{chapter.attach_url}}" type="video/webm">
          <source src="{{chapter.attach_url}}" type="video/mp4">
          Sorry, your browser doesn't support embedded videos.
        </video>
      {% elif chapter.detail_type == 'M' %}
        {% load markdownify %}
        {{chapter.detail}}
        {{chapter.detail|markdownify}}
        {% autoescape off %}
          {{chapter.detail|markdownify}}
        {% endautoescape %}
      {% elif chapter.detail_type == 'P' %}
        <iframe src="{{chapter.attach_url}}&embedded=true" frameborder="0" height="100%" style="height: 100vh;" width="100%"> </iframe>
      {% else %}
        {% autoescape off %}
          {{chapter.detail}}
        {% endautoescape %}
      {% endif %}
    </div>
  </div>
</div>
<script src="/static/study/layui/layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
});
</script>
</body>
</html>